<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/Detailedpage.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet">
    <title>产品详细页</title>
</head>
<body>
    <div class="web">
        <!-- 头部 -->
        <header>
            <div class="title-product">
                <div>
                    <input type="submit" value="Back">
                </div>
                <div>
                    <h1>产品详细</h1>
                </div>
                <div>
                    <img src="./img/形状9大.png" alt="">
                </div>
            </div>
        </header>
            <!-- 主体 -->
        <main>
            <div class="domain-options">
                <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./img/图层123.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/图层123.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/图层123.png" alt="">
                        </div>
                    </div>
                    <!-- 滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>

                <div class="buy">
                    <p>￥32</p>
                    <input type="submit" value="购买">
                </div>

                <div class="evaluate">
                    <p>
                        <img src="./img/形状12中.png" alt="">  好评度<span>99%</span> 
                    </p>
                    <p>共605个评价></p>
                </div>

                <div class="pos">
                    <p>
                        适用商户 <span>&gt;</span>
                    </p>
                </div>

                <div class="listdeta">
                    <div class="imgtwo">
                        <img src="./img/图层22222.png" alt="">
                        <p>正佳店</p>
                    </div>
                    <div class="dateone">
                        <p>万岁寿司（正佳店）</p>
                        <div class="imgsixteen">
                            <!-- 五角星 --> <span>10分</span>
                        </div>
                        <p>离你100m</p>
                        <p>
                            <a href="#">查看详情 >></a>
                            <input type="submit" value="进入">
                        </p>
                    </div>
                </div>

                <div class="listdeta">
                    <div class="imgtwo">
                        <img src="./img/图层333333.png" alt="">
                        <p>正佳店</p>
                    </div>
                    <div class="dateone">
                        <p>万岁寿司（体育西店）</p>
                        <div class="imgsixteen">
                            <!-- 五角星 --> <span>10分</span>
                        </div>
                        <p>离你100m</p>
                        <p>
                            <a href="#">查看详情 >></a>
                            <input type="submit" value="进入">
                        </p>
                    </div>
                </div>

                <div class="listdeta">
                    <div class="imgtwo">
                        <img src="./img/4444444.png" alt="">
                        <p>正佳店</p>
                    </div>
                    <div class="dateone">
                        <p>万岁寿司（昌岗店）</p>
                        <div class="imgsixteen">
                            <!-- 五角星 --> <span>10分</span>
                        </div>
                        <p>离你100m</p>
                        <p>
                            <a href="#">查看详情 >></a>
                            <input type="submit" value="进入">
                        </p>
                    </div>
                </div>

                <div class="listdeta">
                    <div class="imgtwo">
                        <img src="./img/图层22222.png" alt="">
                        <p>正佳店</p>
                    </div>
                    <div class="dateone">
                        <p>万岁寿司（正佳店）</p>
                        <div class="imgsixteen">
                            <!-- 五角星 --> <span>10分</span>
                        </div>
                        <p>离你100m</p>
                        <p>
                            <a href="#">查看详情 >></a>
                            <input type="submit" value="进入">
                        </p>
                    </div>
                </div>

                <div class="listdeta">
                    <div class="imgtwo">
                        <img src="./img/图层22222.png" alt="">
                        <p>正佳店</p>
                    </div>
                    <div class="dateone">
                        <p>万岁寿司（正佳店）</p>
                        <div class="imgsixteen">
                            <!-- 五角星 --> <span>10分</span>
                        </div>
                        <p>离你100m</p>
                        <p>
                            <a href="#">查看详情 >></a>
                            <input type="submit" value="进入">
                        </p>
                    </div>
                </div>

            </div>
        </main>

        <footer>
            <div class="homefooter">
                <div>
                    <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Homepage.html">
                        <img src="./img/首页.png" alt="">
                        <p>首页</p>
                    </a>
                </div>
                <div>
                    <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Classifypage.html">
                        <img src="./img/分类4.png" alt="">
                        <p>分类</p>
                    </a>
                </div>
                <div>
                    <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Classifypage.html">
                        <img src="./img/形状7副本.png" alt="">
                        <p>发现</p>
                    </a>
                </div>
                <div>
                    <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Mypage.html">
                        <img src="./img/我的.png" alt="">
                        <p>我的</p>
                    </a>
                </div>
            </div>
        </footer>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/js/swiper.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
        autoplay : 2000,
        direction: 'horizontal',
        loop: true,

          // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
        })        
        </script>
</body>
</html>